<!--
 * @Author: wangwenshuai 644586996@qq.com
 * @Date: 2022-11-11 09:55:21
 * @LastEditors: wangwenshuai 644586996@qq.com
 * @LastEditTime: 2022-11-11 14:27:34
 * @FilePath: \CarbonPccountingProject\carbon_accounting_project\src\views\About\about.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="contactUs_box" v-title data-title="后羿零碳-联系我们">
    <img src="@/assets/img/about-banner2.png" alt />
    <div style="min-height:761px">
      <transition name="slide-fade">
        <div v-show="aboutShow">
          <div class="contact">
            <div class="contact_us">
              <div class="title">一点五度科技</div>
              <p class="text">1.5℃，Powered by Innovation</p>

              <p class="more">地址: 北京市海淀区邓庄南路9号</p>
              <p class="more">邮编: 100094</p>
              <p class="more">电话: +86-10-82178985</p>
              <p class="more">传真: +86-10-82178980</p>
              <p class="more">网址: sdg.casearth.cn</p>
              <p class="more">Email: casearth@radi.ac.cn</p>
            </div>

            <!-- contact_us -->

            <div class="contact_from">
              <div>
                <strong style="font-size:24px;margin-b">联系我们</strong>
                <p class="text">想要了解更多关于后羿零碳的产品和服务，请提供您的联系方式，我们会尽快回复</p>
              </div>

              <a-form :form="form" class="input_box">
                <div class="form">
                  <div class="form_box">
                    <div class="title">您对哪方面感兴趣:*</div>
                    <a-select
                      default-value="1"
                      placeholder="选择核感兴趣方面"
                      v-decorator="[
                  'select',
                  {
                    rules: [{ required: true, message: '请选择核感兴趣方面!' }],
                  },
                ]"
                    >
                      <a-select-option value="1">统计范畴三(其他间接)温室气体排放量</a-select-option>
                      <a-select-option value="2">境外附属公司温室气体计算</a-select-option>
                      <a-select-option value="3">温室气体计算指导服务</a-select-option>
                    </a-select>
                  </div>
                  <div class="form_box">
                    <a-form-item style="width: 100%">
                      <div class="title">工作职能*</div>
                      <a-input
                        placeholder
                        v-decorator="[
                    'job',
                    { rules: [{ required: true, message: '请填写工作职能' }] },
                  ]"
                      />
                    </a-form-item>
                  </div>
                  <div class="form_box">
                    <a-form-item class="name pad_lef">
                      <div class="title">名*</div>
                      <a-input
                        placeholder
                        v-decorator="[
                    'fullName',
                    { rules: [{ required: true, message: '请填写姓名' }] },
                  ]"
                      />
                    </a-form-item>

                    <a-form-item class="name">
                      <div class="title">姓*</div>
                      <a-input
                        placeholder
                        v-decorator="[
                    'name',
                    { rules: [{ required: true, message: '请填写姓名' }] },
                  ]"
                      />
                    </a-form-item>
                  </div>

                  <a-form-item class="form_box">
                    <div class="title">工作邮箱*</div>
                    <a-input
                      placeholder
                      v-decorator="[
                  'email',
                  {
                    rules: [
                      {
                        type: 'email',
                        message: '请输入正确邮箱',
                      },
                      {
                        required: true,
                        message: '请填写邮箱!',
                      },
                    ],
                  },
                ]"
                    />
                  </a-form-item>
                </div>

                <div class="form_footer">
                  <a-form-item class="tip">
                    <a-checkbox-group
                      v-decorator="[
                  'checkbox-grop',
                  {
                    initialValue: ['A'],
                    rules: [
                      { required: true, message: '请勾选服务条款和隐私协议' },
                    ],
                  },
                ]"
                    >
                      <a-checkbox value="A">
                        请同意我们的
                        <a>服务条款</a> 和
                        <a>隐私协议</a>。
                      </a-checkbox>
                    </a-checkbox-group>
                  </a-form-item>

                  <div class="btn_box">
                    <div class="PreviewBtn" @click="save()">
                      <div class="text">联系我们</div>
                    </div>
                  </div>
                </div>
              </a-form>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      flag: true,
      unclickable: false,
      timer: null,
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
      aboutShow: false
    };
  },
  mounted() {
    setTimeout(() => {
      this.aboutShow = true;
    }, 100);
  },
  methods: {
    save() {
      this.form.validateFields(err => {
        if (!err) {
          if (this.flag) {
            this.$message.success("操作成功");
            this.flag = false;
            setTimeout(() => {
              this.flag = true;
            }, 5000);
          } else {
            this.$message.warning("请勿频繁提交信息");
          }
        }
      });
      //   this.$bus.$emit('changeStepsCurrent', step)
    }
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .contactUs_box {
    padding: 0 0 120px 0;
    display: flex;
    // min-height: 1061px;
    flex-direction: column;
    #container {
      border-radius: 10px;
      overflow: hidden;
      height: 180px !important;
      width: 100% !important;
      margin-bottom: 20px;
      box-shadow: 2px 2px 10px rgb(202, 199, 199);
    }
    img {
      height: 300px;
      width: 100%;
      margin-bottom: 60px;
    }
    .contact {
      padding: 50px 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: auto;
      width: 1200px;
      overflow: hidden;
      .contact_us {
        width: 500px;
        color: rgb(0, 0, 0);
        padding-top: 15px;
        // border-top: 1px solid rgb(201, 198, 198);
        text-align: left;
        //   margin-right: 60px;
        .title {
          font-weight: 700;
          font-size: 40px;
          margin-bottom: 10px;
        }
        .text {
          margin: 0;
          margin-bottom: 20px;
          font-size: 16px;
        }
        .more {
          font-weight: 400;
          font-size: 18px;
          line-height: 23px;
        }
      }
      .contact_from {
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgb(202, 199, 199);
        text-align: left;
        width: 620px;
        border: 1px solid #ebebeb;
        background: #fff;
        padding: 24px;
        color: #262a2f;
        font-size: 16px;
        .input_box {
          display: flex;
          flex-direction: column;
          .form {
            display: flex;
            flex-wrap: wrap;
            margin-top: 8px;
            margin-left: -24px;
            margin-bottom: -24px;
            max-width: 584px;
            width: 100%;
            .form_box {
              margin-bottom: 30px;
              width: 100%;
              padding-left: 24px;
              margin-bottom: 24px;
              display: flex;
              flex-wrap: wrap;
              .name {
                width: 50%;
              }
              .pad_lef {
                padding-right: 10px;
              }
              .title {
                margin-right: 8px;
                font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                  BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                  Droid Sans, Helvetica Neue, sans-serif;
                font-size: 14px;
                line-height: 1.2;
                margin-bottom: 12px;
              }
              .ant-select {
                width: 100%;
              }
              .ant-input {
                height: 46px;

                width: 100%;
              }
              .ant-select-selection {
              }
              .ant-select-selection--single {
                height: 46px;
                width: 100%;
              }
              .ant-select-selection__rendered {
                line-height: 46px;
              }
            }
          }
          .form_footer {
            text-align: right;
            flex-shrink: 0;
            margin-left: auto;
            .ant-checkbox-wrapper {
              font-size: 12px !important;
            }
          }
        }
        .text {
          font-size: 14px;
        }
      }
    }
    .PreviewBtn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 3px;
      height: 48px;
      text-decoration: none;

      cursor: pointer;
      outline: none;
      min-width: 140px;
      padding: 0 16px;

      border: 1px solid #50baf3;
      background: #fff;
      color: #50baf3;
      transition: color 0.5s;
      .text {
        font-size: 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        z-index: 4;
      }
      &:hover {
        color: #fff;
        &::after {
          height: 100%;
        }
      }
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        background: #50baf3;
        transition: height 0.5s;
        z-index: 0;
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .contactUs_box {
    padding: 0 0 120px 0;
    display: flex;
    // min-height: 1061px;
    flex-direction: column;
    #container {
      border-radius: 10px;
      overflow: hidden;
      height: 180px !important;
      width: 100% !important;
      margin-bottom: 20px;
      box-shadow: 2px 2px 10px rgb(202, 199, 199);
    }
    img {
      height: 300px;
      width: 100%;
      margin-bottom: 60px;
    }
    .contact {
      padding: 50px 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: auto;
      width: 100%;
      overflow: hidden;
      .contact_us {
        width: 500px;
        color: rgb(0, 0, 0);
        padding-top: 15px;
        // border-top: 1px solid rgb(201, 198, 198);
        text-align: left;
        //   margin-right: 60px;
        .title {
          font-weight: 700;
          font-size: 40px;
          margin-bottom: 10px;
        }
        .text {
          margin: 0;
          margin-bottom: 20px;
          font-size: 16px;
        }
        .more {
          font-weight: 400;
          font-size: 18px;
          line-height: 23px;
        }
      }
      .contact_from {
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgb(202, 199, 199);
        text-align: left;
        width: 620px;
        border: 1px solid #ebebeb;
        background: #fff;
        padding: 24px;
        color: #262a2f;
        font-size: 16px;
        .input_box {
          display: flex;
          flex-direction: column;
          .form {
            display: flex;
            flex-wrap: wrap;
            margin-top: 8px;
            margin-left: -24px;
            margin-bottom: -24px;
            max-width: 584px;
            width: 100%;
            .form_box {
              margin-bottom: 30px;
              width: 100%;
              padding-left: 24px;
              margin-bottom: 24px;
              display: flex;
              flex-wrap: wrap;
              .name {
                width: 50%;
              }
              .pad_lef {
                padding-right: 10px;
              }
              .title {
                margin-right: 8px;
                font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                  BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                  Droid Sans, Helvetica Neue, sans-serif;
                font-size: 14px;
                line-height: 1.2;
                margin-bottom: 12px;
              }
              .ant-select {
                width: 100%;
              }
              .ant-input {
                height: 46px;

                width: 100%;
              }
              .ant-select-selection {
              }
              .ant-select-selection--single {
                height: 46px;
                width: 100%;
              }
              .ant-select-selection__rendered {
                line-height: 46px;
              }
            }
          }
          .form_footer {
            text-align: right;
            flex-shrink: 0;
            margin-left: auto;
            .ant-checkbox-wrapper {
              font-size: 12px !important;
            }
          }
        }
        .text {
          font-size: 14px;
        }
      }
    }
    .PreviewBtn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 3px;
      height: 48px;
      text-decoration: none;

      cursor: pointer;
      outline: none;
      min-width: 140px;
      padding: 0 16px;

      border: 1px solid #50baf3;
      background: #fff;
      color: #50baf3;
      transition: color 0.5s;
      .text {
        font-size: 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        z-index: 4;
      }
      &:hover {
        color: #fff;
        &::after {
          height: 100%;
        }
      }
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        background: #50baf3;
        transition: height 0.5s;
        z-index: 0;
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .contactUs_box {
    padding: 0 0 120px 0;
    display: flex;
    min-height: 500px;
    flex-direction: column;
    #container {
      border-radius: 10px;
      overflow: hidden;
      height: 180px !important;
      width: 100% !important;
      margin-bottom: 20px;
      box-shadow: 2px 2px 10px rgb(202, 199, 199);
    }
    img {
      object-fit: cover;
      height: 300px;
      width: 100%;
      margin-bottom: 10px;
    }
    .contact {
      padding: 10px 20px;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      margin: auto;
      width: 100%;
      overflow: hidden;
      .contact_us {
        width: 100%;
        color: rgb(0, 0, 0);
        padding-top: 15px;
        // border-top: 1px solid rgb(201, 198, 198);
        text-align: left;
        //   margin-right: 60px;
        .title {
          font-weight: 700;
          font-size: 26px;
          // line-height: 84px;
          font-family: "Roboto-Black-1";
          margin-bottom: 20px;
        }
        .more {
          font-weight: 400;
          font-size: 16px;
          line-height: 23px;
          font-family: "Roboto-Italic-9";
        }
      }
      .contact_from {
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgb(202, 199, 199);
        text-align: left;
        width: 100%;
        border: 1px solid #ebebeb;
        background: #fff;
        padding: 24px;
        color: #262a2f;
        font-size: 16px;
        .input_box {
          display: flex;
          flex-direction: column;
          .form {
            display: flex;
            flex-wrap: wrap;
            margin-top: 8px;
            margin-left: -24px;
            margin-bottom: -24px;
            max-width: 584px;
            width: 100%;
            .form_box {
              margin-bottom: 30px;
              width: 100%;
              padding-left: 24px;
              margin-bottom: 24px;
              display: flex;
              flex-wrap: wrap;
              .name {
                width: 50%;
              }
              .pad_lef {
                padding-right: 10px;
              }
              .title {
                margin-right: 8px;
                font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                  BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                  Droid Sans, Helvetica Neue, sans-serif;
                font-size: 14px;
                line-height: 1.2;
                margin-bottom: 12px;
              }
              .ant-select {
                width: 100%;
              }
              .ant-input {
                height: 46px;

                width: 100%;
              }
              .ant-select-selection {
              }
              .ant-select-selection--single {
                height: 46px;
                width: 100%;
              }
              .ant-select-selection__rendered {
                line-height: 46px;
              }
            }
          }
          .form_footer {
            text-align: right;
            flex-shrink: 0;
            margin-left: auto;
            .ant-checkbox-wrapper {
              font-size: 12px !important;
            }
          }
        }
        .text {
          font-size: 14px;
        }
      }
    }
    .PreviewBtn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 3px;
      height: 48px;
      text-decoration: none;

      cursor: pointer;
      outline: none;
      min-width: 140px;
      padding: 0 16px;

      border: 1px solid #50baf3;
      background: #fff;
      color: #50baf3;
      transition: color 0.5s;
      .text {
        font-size: 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        z-index: 4;
      }
      &:hover {
        color: #fff;
        &::after {
          height: 100%;
        }
      }
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        background: #50baf3;
        transition: height 0.5s;
        z-index: 0;
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .contactUs_box {
    padding: 0 0 120px 0;
    display: flex;
    min-height: 500px;
    flex-direction: column;
    background: #fff;
    #container {
      border-radius: 10px;
      overflow: hidden;
      height: 180px !important;
      width: 100% !important;
      margin-bottom: 20px;
      box-shadow: 2px 2px 10px rgb(202, 199, 199);
    }
    img {
      object-fit: cover;
      height: 300px;
      width: 100%;
      margin-bottom: 10px;
    }
    .contact {
      padding: 10px 10px;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-between;
      margin: auto;
      width: 100%;
      overflow: hidden;
      .contact_us {
        width: 100%;
        color: rgb(0, 0, 0);
        padding-top: 15px;
        // border-top: 1px solid rgb(201, 198, 198);
        text-align: left;
        //   margin-right: 60px;
        .title {
          font-weight: 700;
          font-size: 26px;
          // line-height: 84px;
          font-family: "Roboto-Black-1";
          margin-bottom: 20px;
        }
        .more {
          font-weight: 400;
          font-size: 16px;
          line-height: 23px;
          font-family: "Roboto-Italic-9";
        }
      }
      .contact_from {
        border-radius: 10px;
        box-shadow: 2px 2px 10px rgb(202, 199, 199);
        text-align: left;
        width: 100%;
        border: 1px solid #ebebeb;
        background: #fff;
        padding: 24px;
        color: #262a2f;
        font-size: 16px;
        .input_box {
          display: flex;
          flex-direction: column;
          .form {
            display: flex;
            flex-wrap: wrap;
            margin-top: 8px;
            margin-left: -24px;
            margin-bottom: -24px;
            max-width: 584px;
            width: 100%;
            .form_box {
              margin-bottom: 30px;
              width: 100%;
              padding-left: 24px;
              margin-bottom: 24px;
              display: flex;
              flex-wrap: wrap;
              .name {
                width: 50%;
              }
              .pad_lef {
                padding-right: 10px;
              }
              .title {
                margin-right: 8px;
                font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
                  BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
                  Droid Sans, Helvetica Neue, sans-serif;
                font-size: 14px;
                line-height: 1.2;
                margin-bottom: 12px;
              }
              .ant-select {
                width: 100%;
              }
              .ant-input {
                height: 46px;

                width: 100%;
              }
              .ant-select-selection {
              }
              .ant-select-selection--single {
                height: 46px;
                width: 100%;
              }
              .ant-select-selection__rendered {
                line-height: 46px;
              }
            }
          }
          .form_footer {
            text-align: right;
            flex-shrink: 0;
            margin-left: auto;
            .ant-checkbox-wrapper {
              font-size: 12px !important;
            }
          }
        }
        .text {
          font-size: 14px;
        }
      }
    }
    .PreviewBtn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 3px;
      height: 48px;
      text-decoration: none;

      cursor: pointer;
      outline: none;
      min-width: 140px;
      padding: 0 16px;

      border: 1px solid #50baf3;
      background: #fff;
      color: #50baf3;
      transition: color 0.5s;
      .text {
        font-size: 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;
        z-index: 4;
      }
      &:hover {
        color: #fff;
        &::after {
          height: 100%;
        }
      }
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        background: #50baf3;
        transition: height 0.5s;
        z-index: 0;
      }
    }
  }
}
</style>